<template>
    <view class="content">
		<uni-card style="margin:0px 5px; padding:0px;">
		<view class="page-title">
			<view class="sign-title">
				<view class="sign-title-l">
					<view class="portrait" style="cursor" @click="start();">
					<uni-icons type="location" style="color:aliceblue;" size="40"></uni-icons>
					</view>
					<view class="text">
						<view class="name">
							{{desc}}
						</view>
						<view class="gz">
							<text> {{postime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		</uni-card>
		<map style="width: 100%; height: 100vh;" :layer-style='5'  :style="{height:mapheight}" :show-location='true' :enable-satellite='true' :enable-3D='true' :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale"  @markertap="markertap"   @callouttap='callouttap'>
       </map>
			
    </view>
</template>
<script>
export default {
	data() {
		return {
			latitude:23.106574, //纬度
			longitude:113.324587,//经度
			scale:13,//缩放级别
			bottomData:false,
			postime: '',
			desc: '',
			marker: [
			{
				id:0,
				latitude: 23.13065,//纬度
				longitude: 113.3274,//经度
				iconPath: '',    //显示的图标        
				rotate:0,   // 旋转度数
				width:20,   //宽
				height:30,   //高
				//   title:'我在这里',//标注点名
				alpha:0.5,   //透明度
				callout:{//自定义标记点上方的气泡窗口 点击有效  
				content:'天宝大厦',//文本
				color:'#ffffff',//文字颜色
				fontSize:14,//文本大小
				borderRadius:15,//边框圆角
				borderWidth:'10',
				bgColor:'#e51860',//背景颜色
				display:'ALWAYS',//常显
			},
			},
			{
				id:1234597,
				latitude:  23.106574,//纬度
				longitude: 113.324587,//经度
				iconPath: '',    //显示的图标        
				rotate:0,   // 旋转度数
				width:20,   //宽
				height:30,   //高
				//  title:'我在这里',//标注点名
				alpha:0.5,   //透明度
				//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
				//   color:'red',//文本颜色
				//      },
				callout:{//自定义标记点上方的气泡窗口 点击有效  
					content:'广州塔',//文本
					color:'#ffffff',//文字颜色
					fontSize:14,//文本大小
					borderRadius:15,//边框圆角
					borderWidth:'10',
					bgColor:'#e51860',//背景颜色
					display:'ALWAYS',//常显
				},
			},
			{
				id:2,
				latitude:  23.1338,//纬度
				longitude: 113.33052,//经度
				iconPath: '',    //显示的图标        
				rotate:0,   // 旋转度数
				width:20,   //宽
				height:30,   //高
				alpha:0.5,   //透明度
				callout:{//自定义标记点上方的气泡窗口 点击有效  
					content:'德隆大厦',//文本
					color:'#ffffff',//文字颜色
					fontSize:14,//文本大小
					borderRadius:15,//边框圆角
					borderWidth:'10',
					bgColor:'#e51860',//背景颜色
					display:'ALWAYS',//常显
				},
			},
			{
				id:3,
				latitude:  23.136455,//纬度
				longitude: 113.329002,//经度
				iconPath: '',    //显示的图标        
				rotate:0,   // 旋转度数
				width:20,   //宽
				height:30,   //高
				alpha:0.5,   //透明度
				callout:{//自定义标记点上方的气泡窗口 点击有效  
					content:'羊城国际商贸中心',//文本
					color:'#ffffff',//文字颜色
					fontSize:14,//文本大小
					borderRadius:15,//边框圆角
					borderWidth:'10',
					bgColor:'#e51860',//背景颜色
					display:'ALWAYS',//常显
				},
			},
			{
				id:4,
				latitude:  23.224781,//纬度
				longitude: 113.293911,//经度
				iconPath: '',    //显示的图标        
				rotate:0,   // 旋转度数
				width:20,   //宽
				height:30,   //高
				alpha:0.5,   //透明度
				callout:{//自定义标记点上方的气泡窗口 点击有效  
					content:'天瑞广场A座',//文本
					color:'#ffffff',//文字颜色
					fontSize:16,//文本大小
					borderRadius:15,//边框圆角
					borderWidth:'12',
					bgColor:'#e51860',//背景颜色
					display:'ALWAYS',//常显
				},
			},
			{ 
				id:5,
				latitude:  23.072726,//纬度
				longitude: 113.277921,//经度
				iconPath: '',    //显示的图标        
				rotate:0,   // 旋转度数
				width:20,   //宽
				height:30,   //高
				alpha:0.5,   //透明度
				callout:{//自定义标记点上方的气泡窗口 点击有效  
					content:'大米和小米儿童康复(广州盈丰)中心',//文本
					color:'#ffffff',//文字颜色
					fontSize:14,//文本大小
					borderRadius:15,//边框圆角
					borderWidth:'8',
					bgColor:'#e51860',//背景颜色
					display:'ALWAYS',//常显
				},
			},
			],
		}
	},
	onLoad() {

	},
	computed:{
		mapheight(){
			let data =''
			if(this.bottomData){
				if(this.upTop){
					data ='50px'
				}else{
					data ='200px'
				}
			}else{
				data ='90vh'
			}
			return data
		},
		coverbottom(){
			let data =''
			if(this.bottomData){
				data ='20rpx'
			}else{
				data ='100rpx'
			}
			return data
		}
	},
	methods:{
		start(){
			
		},
		//地图点击事件
		markertap(e) {
			console.log("===你点击了标记点===",e)
			},
		//地图点击事件
		callouttap(e){
			console.log('地图点击事件',e)
		}
	}
}
</script>
<style lang="scss" scoped>
	page {
		background-color: #f4f5f6;
		height: 100%;
		font-size: 28upx;
		line-height: 1.8;
	}
	
	view {
		font-size: 28upx;
		line-height: 1.8;
	}
	
	.content {
		overflow: hidden;
		background-color: #FFFFFF;
		height: 100%;
	}
	.page-title{
		// padding: 30upx 24upx;
		
	}
	.sign-title {
		display: flex;
		justify-content: space-between;
		// padding: 30upx 24upx;
		// border-bottom: 1upx solid #EBEEF5;
		align-items: center;
	}
	.posInfo{
		
	}
	.sign-title .portrait {
		width: 80upx;
		height: 80upx;
		line-height: 85upx;
		border-radius: 50%;
		background-color: #00aa00;
		color: #fff;
		font-size: 28upx;
		text-align: center;
	}
	
	.sign-title .sign-title-l {
		display: flex;
	}
	
	.sign-title .sign-title-l .text {
		margin-left: 20upx;
	}
	
	.sign-title .sign-title-l .text .name {
		font-size: 32upx;
	}
	
	.sign-title .sign-title-l .text .gz {
		color: darkblue;
		display: inline-flex;
	}
	
	.sign-title .sign-title-l .text .gz text {
		display: inline-block;
	}
	
	.sign-title .sign-title-l .text .gz .t1 {
		overflow: hidden;
		/*超出部分隐藏*/
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		white-space: nowrap;
		/*规定段落中的文本不进行换行 */
		width: 166upx;
		/*需要配合宽度来使用*/
	}
</style>